import React, { useCallback, useState } from 'react';
/*
简单来讲：useCallback可以保证，函数组件的每一次更新，不再把里面的小函数重新创建，用的都是第一次创建的！！
【注意】useCallback不要乱用！并不是所有组件内部的函数都拿它处理会更好！！
+ 虽然减少了堆内存的开辟
+ 但是useCallback本身也有自己的处理逻辑和缓存机制，这个也消耗时间啊。
啥时候用它呢？
父组件嵌套子组件，父组件要把一个 内部的函数，基于属性传递给子组件，此时传递的这个方法，我们基于useCallback处理一下会更好！！
*/
const Child = React.memo(() => {
  console.log('Child Render');
  return (
    <>
      <div>我是子组件</div>
    </>
  );
});
/*
React重复渲染：父组件刷新,子组件一直渲染
1 传递给子组件的属性（函数），每一次需要是相同的堆内存地址，用useCallback处理！！
2 在子组件内部验证父组件传递的属性是否发生改变，如果没有变化，让子组件不能更新，有变化才去更新。
 此时子组件是函数组件，基于React.memo函数，对新老传递的属性做比较，如果不一致，才会把函数组件执行，如果一致，则不让子组件更新！！
 */
export default function TestTwo() {
  const [x, setX] = useState(0);
  // const handle = () => {};  //第一次：0x001 第二次0x002
  const handle = useCallback(() => {}, []); //第一次0x001  第二次：0x001 第三次：0x001....

  return (
    <>
      <div className='box'>
        <Child handle={handle} />
        <div className='main'>
          <p>{x}</p>
        </div>
        <div className='footer'>
          <button onClick={() => setX(x + 1)}>累加</button>
        </div>
      </div>
    </>
  );
}
